<template>
    <!-- 二维码登录 -->
    <div class="codeLogin">
        <!-- <div class="textStyle">
            <h1>微信扫码登入</h1>
        </div> -->
        <div class="img" v-loading="false">
            <img width="200px" :src="qrImg" />
            <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQr" v-loading="loading"></i>
        </div>
        <p>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weixin"></use>
            </svg>

            <b class="text2">扫描二维码</b>
        </p>



    </div>

</template>
<script>
// 引入socket.io
import socketIo from "socket.io-client"
// 引入qrcode
import qrcode from "qrcode"
// 引入api
import * as api from "@/api/user"
// 引入成功和失败扫码遮罩图片
import invalidImg from "@/assets/img/invalidQr.png"
import scanSuccessImg from "@/assets/img/scancode.png"
// 引入存储
import storage from "@/utils/storage"

export default {
    props: {
        storageUserInfo: {
            require: true
        }
    },
    data() {
        return {
            // 加载动画
            loading:true,
            // 二维码图片
            qrImg: "",
            // 是否显示遮罩
            showQrMask: false,
            // 遮罩背景样式
            maskBg: { backgroundImage: `url(${scanSuccessImg})` }
        }
    },
    created() {
        // 建立socket连接
        let io = socketIo("wss://chst.vip")
        // 监听连接事件
        io.on("connectSuccess", ({ sid }) => {
            // 存到本地存储
            storage.set("qf-sid", sid)
            this.getQrUrl(sid)


        })
        //无效的二维码
        io.on("invalidCode", data => {
            console.log(data)
            // 展示遮罩
            this.showQrMask = true;
            // 显示无效的二维码遮罩样式
            this.maskBg.backgroundImage = `url(${invalidImg})`
        })
        // 扫码成功
        io.on("scancodeSuccess", async ({ state, wechatCode, msg }) => {
            // 扫码成功显示遮罩
            this.showQrMask = true
            this.maskBg.backgroundImage = `url(${scanSuccessImg})`
            if (state) {
                // 调整微信登入的接口i
                let res = await api.wechaLoginApi(wechatCode);
                // 讲内容存到本地
                this.storageUserInfo(res.data)
                // console.log(res)
                // 跳转页面
                this.$router.push("/")
            } else {
                console.error(msg)
            }

        })
    },
    methods: {
        async getQrUrl(sid) {
            // 打开加载动画
            this.loading = true
            // 请求获取二维码地址
            let res = await api.getQrcodeApi(sid);
            // console.log(res)
            let { scanCodeUrl: qrcodeUrl } = res.data
            // 通过qrcode插件 生成二维码
            qrcode.toDataURL(qrcodeUrl, (err, img) => {
                if (err) {
                    throw err
                }
                // console.log(img)
                this.qrImg = img
                // 关掉遮罩
                this.showQrMask = false
                // 关闭动画

                this.loading = false
            })
        },
        // 更新二维码地址
        updateQr() {
            // 获取本地存储的sid
            let sid = storage.get("qf-sid")
            console.log(sid)
            this.getQrUrl(sid)
        }

    }
}

</script>
<style lang="less" scoped>
.text2 {
    text-align: center;
}

.text1 {
    color: white;
    font-size: 15px;
    text-align: center;
    margin-left: 80px;
}

.img {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin-left: 120px;
}

p {
    text-align: center;
    color: white;
}

.box {
    position: relative;
}

.el-input {
    /deep/ .el-input__inner {
        width: 250px;
    }
}

.container {

    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.Login {
    width: 450px;
    height: 550px;
    // border: 1px solid black;
    background-color: rgba(0, 0, 0, 0.4);
    // display: flex;
    // justify-content: center;
    // align-items: center;
    position: absolute;
    right: 100px;
    top: 130px;

}

//二维码样式

.mask {
    width: 200px;
    height: 200px;
    opacity: 0.8;
    background-color: #fff;
    position: absolute;
    left: 120px;
    // background-image: url("../../assets/img/scancode.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}


.textStyle {
    color: white;
    text-align: center;
    margin: 60px 0 40px 0;

}

.submit {

    margin-top: 50px;
}

.el-button {
    width: 250px;
}
</style>